<template>
	<div style="background-color: #f4f4f4;">
		<div style="background-color: #fff;padding: 15px;">
			<div style="display: flex;align-items: center;border-bottom: 1px solid #ccc;padding-bottom: 8px;">
				<img style="width: 5px;height: 22px;" src="@/assets/images/ApplicationProducts2.png">
				<span style="font-size: 18px;color: #333;margin-left:5px;font-weight: 600;">筛选条件</span>
			</div>
			<div style="padding-top: 10px;" >
				<el-row>
					<el-col :xs="24" :sm="24" :md="2" :lg="2" :xl="2">
						<span style="font-size: 14px;color: #333;">业务类型：</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="22" :lg="22" :xl="22" style="margin-top: 3px;">
						<el-row>
							<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" v-for="(item,index) in applicableTargets"
								:key="item.id">
								<el-checkbox-group v-model="checkList">
									    <el-checkbox :label="item.id"
									    	@change="handleCheckbox()">{{item.name}}
											</el-checkbox>
								</el-checkbox-group>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
				<el-row v-if="shows == 0">
					<el-col :xs="24" :sm="24" :md="2" :lg="2" :xl="2">
						<span style="font-size: 14px;color: #333;">来源类别：</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="22" :lg="22" :xl="22" style="margin-top: 3px;">
						<el-row>
								<el-checkbox-group v-model="laiyuan">
									<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" >
										<el-checkbox label="1"
											@change="handleCheckbox()">内部产品
										</el-checkbox>
									</el-col>
									<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" >
										<el-checkbox label="2"
											@change="handleCheckbox()">外部产品
										</el-checkbox>
									</el-col>   
								</el-checkbox-group>
						</el-row>
					</el-col>
				</el-row>
				<el-row v-if="shows == 0">
					<el-col :xs="24" :sm="24" :md="2" :lg="2" :xl="2">
						<span style="font-size: 14px;color: #333;">价格类别：</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="22" :lg="22" :xl="22" style="margin-top: 3px;">
						<el-row>
								<el-checkbox-group v-model="mianfei">
									<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" >
										<el-checkbox label="1"
											@change="handleCheckbox()">付费
										</el-checkbox>
									</el-col>
									<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" >
										<el-checkbox label="2"
											@change="handleCheckbox()">免费
										</el-checkbox>
									</el-col>
								</el-checkbox-group>
						</el-row>
					</el-col>
				</el-row>
				<el-row v-if="shows == 0">
					<el-col :xs="24" :sm="24" :md="2" :lg="2" :xl="2">
						<span style="font-size: 14px;color: #333;">服务方式：</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="22" :lg="22" :xl="22" style="margin-top: 3px;">
						<el-row>
							<el-col >
								<el-checkbox-group v-model="fuwu">
									<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" >
										<el-checkbox label="1"
									    	@change="handleCheckbox()">API调用
											</el-checkbox>
									</el-col>
									<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" >
										<el-checkbox label="2"
												@change="handleCheckbox()">在线预览
											</el-checkbox>
									</el-col>
									<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" >
										<el-checkbox label="3"
												@change="handleCheckbox()">产品下载
											</el-checkbox>
									</el-col>
											
											
								</el-checkbox-group>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="xiala" style="background-color: #fff;text-align: center;padding: 20px 0;">
			<p style="cursor: pointer;" v-if="shows == 0" @click="shows = 1"><span>收起</span></p>
			<p style="cursor: pointer;" v-if="shows == 1" @click="shows = 0"><span>更多条件</span></p>
		</div>
		<div style="margin-top: 5px;background-color: #fff;padding: 10px;">
			<el-row>
				<el-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7">
					<div style="display: flex;align-items: center;">
						<template v-for="(item,index) in menuList">
							<div :class="[item.active==true?'active':'nomal']" style="cursor: pointer;"
								@click="handleChange(index)">
								<span>{{item.name}}</span>
								<img v-if="item.sort===''" style="width: 7px;height: 9px;margin-left: 8px;"
									src="@/assets/images/industryNews32.png" />
								<img v-if="item.sort===0" style="width: 7px;height: 9px;margin-left: 8px;"
									src="@/assets/images/industryNews32.png" />
								<img v-if="item.sort===1" style="width: 7px;height: 9px;margin-left: 8px;"
									src="@/assets/images/industryNews42.png" />

							</div>
							<div v-if="index<2" style="margin: 0 5px;border-left: 1px solid #ccc;"></div>
						</template>
					</div>
				</el-col>
				<el-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17" class="mobileSearchRinght"
					style="display: flex;justify-content: flex-end;">
					<div style="display: flex;align-items: center;color: #333;font-size: 14px;" class="mobileColumn">
						<!-- <div style="display: flex;align-items: center;">
							<span>有效期</span>
							<el-date-picker style="width: 290px;height: 29px;margin-left: 8px;" v-model="timeArr" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @blur="detePickChange">
							</el-date-picker>
						</div> -->

						<div style="display: flex;align-items: center;margin-left: 8px;" class="mobileMargin">
							<!-- <span style="">资源名称</span> -->
							<el-input style="width: 400px;height: 29px;margin-left: 8px;" placeholder="搜索数据名,如:电力调血、用户画像等"
								v-model="title" @input="inputChange"></el-input>
							<img slot="append" style="width: 28px;height: 29px;cursor: pointer;"
								src="@/assets/images/industryNews34.png" @click="inputChange"/>
						</div>

						<div style="display: flex;align-items: center;margin-left: 8px;cursor: pointer;"
							class="mobileMargin">
							<img style="width: 75px;height: 29px;" src="@/assets/images/industryNews33.png"
								@click="reset" />
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		CategoryManage
	} from "@/request/api/ApplicationProducts";
	export default {
		props: {

		},
		data() {
			return {
				applicableTargets: [],
				checkList: [], //已选
				laiyuan:[],//来源类别
				mianfei:[],//是否免费
				fuwu:[],//服务方式
				generalName:'shelf_time',
				menuList: [{
					name: '发布时间',
					sort: '',
					active: false,
					generalName:'shelf_time'
				},  {
					name: '访问量',
					sort: '',
					active: false,
					generalName:'visit'
				},  {
					name: '交易量',
					sort: '',
					active: false,
					generalName:'transaction'
				},  {
					name: '积分',
					sort: '',
					active: false,
					generalName:'integral'
				}],
				title: "", //产品名称
				shows:0,
				sort:"desc"
			}
		},
		created() {
			this.getList()
			this.callback()
		},
		methods: {
			// 多选框
			handleCheckbox() {
				// console.log('handleCheckbox',this.checkList.toString())
				this.callback()
			},
			// 选择时间段
			// detePickChange() {
			// 	for (let i = 0; i < this.menuList.length; i++) {
			// 		this.menuList[i].active = false
			// 		this.menuList[i].sort = ''
			// 	}
			// 	this.name = ""
			// 	this.callback()
			// },
			// 输入名称
			inputChange() {
				for (let i = 0; i < this.menuList.length; i++) {
					this.menuList[i].active = false
					this.menuList[i].sort = ''
				}
				this.timeArr = []
				this.callback()
			},
			// 发布时间 浏览量
			handleChange(val) {
				// console.log('val-----',val)
				for (let i = 0; i < this.menuList.length; i++) {
					if (val == i) {
						this.menuList[i].active = true
						if (this.menuList[i].sort === '') {
							this.menuList[i].sort = 0
						} else if (this.menuList[i].sort === 0) {
							this.menuList[i].sort = 1
						} else if (this.menuList[i].sort === 1) {
							this.menuList[i].sort = 0
						}

					} else {
						this.menuList[i].active = false
						this.menuList[i].sort = ''
					}
				}
				this.generalName = this.menuList[val].generalName
				this.timeArr = []
				// console.log('menuList------',this.menuList)
				// console.log('this.generalName------',this.generalName)
				this.name = ""
				this.callback()
			},
			// 回调数据
			callback() {
			  let indexs = 0
				this.menuList.map((item,index)=>{
					if(this.generalName==item.generalName){
						indexs = index
					}
				})
				// console.log('this.checkList------',this.checkList)
				// console.log('this.sort------',this.sort)
				let params = {
					// categoryId: this.checkList.indexOf(-1) == -1 ? this.checkList.toString() : '',
					categoryId: this.checkList.toString(),
					source: this.laiyuan.toString(),
					isFree: this.mianfei.toString(),
					serviceMode: this.fuwu.toString(),
					// startTime: this.timeArr.length ? this.timeArr[0] : "",
					// endTime: this.timeArr.length ? this.timeArr[1] : "",
					generalName:this.generalName,
					title: this.title,
					ordered: this.menuList[indexs].sort === '' ? 'desc' : this.menuList[indexs].sort === 0 ? 'asc' : 'desc'
					// pageView: this.menuList[1].sort,
				}
				this.$emit('change', params)
			},
			// 重置
			reset() {
				this.checkList = []
				this.laiyuan= []//来源类别
				this.mianfei= []//是否免费
				this.fuwu= []//服务方式
				for (let i = 0; i < this.menuList.length; i++) {
					this.menuList[i].active = false
					this.menuList[i].sort = ''
				}
				this.title = ""
				this.generalName = ""
				this.callback()
			},
			getList() {
				CategoryManage({id:21111}).then(res => {
					if (res.data.code === 1) {
						let list = res.data.data[0].childList
						// console.log('res.list----',list)
						list.forEach((res)=>{
							
								// console.log('res--------xx-',res)
								let name = res.name
								let id = res.id
								// console.log('res--------name,id-',id,name)
								this.applicableTargets.push({
									id:res.id,
									name:res.name
								})
						})
						// console.log('applicableTargets--------',this.applicableTargets)
						// list.unshift({
						// 	label: '全部',
						// 	value: -1
						// })
						// list.map((item) => {
						// 	item.label1 = item.label
						// 	if (item.label.length > 5) {
						// 		item.label = item.label.slice(0, 5) + '...'
						// 	}
						// })
						// this.applicableTargets = list
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobileSearchRinght {
			justify-content: flex-start !important;
		}

		.mobileColumn {
			align-items: start !important;
			flex-direction: column !important;
		}

		.mobileMargin {
			margin-left: 0 !important;
		}
	}

	.nomal {
		padding: 5px 8px;
		color: #333;
		font-size: 14px;
	}

	.active {
		padding: 5px 8px;
		color: #333;
		font-size: 14px;
		background-color: #e5f1fc;
		border-radius: 4px;
	}

	// 日期图标
	/deep/.el-date-editor .el-range__icon {
		line-height: 2px;
	}

	//日期 至
	/deep/.el-date-editor .el-range-separator {
		padding: 0;
		line-height: 23px;
	}

	/deep/.el-input__inner {
		height: 29px;
		line-height: 29px;
	}

	/deep/.el-checkbox {
		margin-bottom: 10px;
	}
	.xiala{
		p span{
			color:#63666B;
		}
		p span:hover{
			cursor: pointer;
			
		}
	}
</style>